<div
  class="x-message-box"
  *ngIf="!messageBox?.input?.hide"
  [@x-move-box-animation]="messageBox.input?.placement"
  (@x-move-box-animation.done)="moveDone($event)"
>
  <x-alert
    (close)="onClose()"
    [title]="messageBox.input?.title"
    [content]="contentTpl"
    [type]="messageBox.input?.type"
    [effect]="messageBox.input?.effect"
    [hideClose]="messageBox.input?.hideClose"
    [closeText]="messageBox.input?.closeText"
    showIcon="false"
    duration="0"
    manual
    disabledAnimation
  ></x-alert>
  <ng-template #contentTpl let-iconTpl="$iconTpl">
    <div class="x-message-box-inner">
      <div class="x-message-box-content">
        <ng-container *ngIf="!messageBox.input?.showInput; else inputTpl">
          <ng-container *ngIf="messageBox.input?.showIcon">
            <ng-container *ngTemplateOutlet="iconTpl"></ng-container>
          </ng-container>
          <ng-container *xOutlet="messageBox.input?.content">
            {{ messageBox.input?.content }}
          </ng-container>
        </ng-container>
        <ng-template #inputTpl>
          <form [formGroup]="formGroup">
            <x-input
              formControlName="inputValue"
              [type]="messageBox.input?.inputType"
              [label]="getLabel"
              [placeholder]="messageBox.input?.inputPlaceholder"
              [pattern]="getPattern"
              [message]="messageBox.input?.inputInvalidMessage"
            ></x-input>
          </form>
        </ng-template>
      </div>
      <x-buttons space="1">
        <x-button *ngIf="messageBox.input?.showCancel" (click)="onCancel()">{{ messageBox.input?.cancelText }}</x-button>
        <x-button type="primary" (click)="onConfirm()" [disabled]="formGroup?.invalid">{{ messageBox.input?.confirmText }}</x-button>
      </x-buttons>
    </div>
  </ng-template>
</div>
